<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <!--
        受控组件和非受控组件中的`控`：受state状态的控制
        受控组件：
        组件中的表单项根据`state状态`数据动态初始显示和更新显示, 当用户输入时实时同步到状态数据中
        也就是实现了页面表单项与 state 数据的双向绑定
    -->
    <script type="text/babel">
        //1、创建一个容器对象
        let root = ReactDOM.createRoot(document.querySelector('#root'));
        //2、创建类式组件
        //以登录界面
        //解构
        let { Component } = React;
        class App extends Component {
            //初始化state,由于文本框/密码(其他表单元素)的值都有可能是频繁发生变化的，所以可以借助于state
            state = {
                //用户名
                user: '',
                //密码
                pass: '',
                //是否选中
                ischecked: true
            }
            render() {
                //解构
                let { user, pass, ischecked } = this.state;
                return <div>
                    <form action="http://www.baidu.com">
                        <p>用户名：<input type="text" value={user} onChange={this.changeUser} /></p>
                        <p>密码：<input type="password" value={pass} onChange={this.changePass} /></p>
                        <p><input type="checkbox" checked={ischecked} onChange={this.changeisChecked} />自动登录</p>
                        <p><button onClick={this.login} type="submit">登录</button></p>
                    </form>
                </div>
            }

            login = e => {
                //阻止事件默认行为 (超链接、表单)
                e.preventDefault();
                //获取用户名框中的内容
                console.log(this.state.user)
                //获取密码框中的内容
                console.log(this.state.pass)
                //获取复选框中的选中状态
                console.log(this.state.ischecked);
            }

            changeUser = e => {
                //修改state状态数据
                // console.log(this);
                this.setState({
                    user: e.target.value
                })
            }
            changePass = e => {
                this.setState({
                    pass: e.target.value
                })
            }
            changeisChecked = () => {
                this.setState({
                    ischecked: !this.state.ischecked
                })
            }
        }
        //3、渲染
        root.render(<App />)
    </script>
</body>

</html>